<template>
	<view class="spread-order">
		<view class="content">
			<view class="order-container">
				<template v-if="mode=='order_list'">
					<view v-for="(item, index) in lists" :key="item.order_sn" class="order-item bg-white mt20">
						<view class="order-header row-between">
							<view class="muted xs row-center" style="gap: 10rpx;">
								<view>订单编号:{{item.order_sn}}</view>
								<image @tap="toCopy(item.order_sn)" src="../../static/images/copy_icon.png"
									style="width: 30rpx;" mode="widthFix">
								</image>
							</view>
							<view class="row" style="gap:10rpx">
								<view>{{getOrderType(item.type_status)}}</view>
								<view>|</view>
								<view :style="{'color':tagStyle(item)}">{{item.status_name}}</view>
							</view>
						</view>
						<view class="order-content row">
							<view class="order-goods-img">
								<u-image width="100%" height="100%" :src="item.avatar" />
							</view>
							
							<view style="display: flex;flex-direction: column;width: 520rpx;">
							<view class="order-goods-info ml20">
								<view class="row-between" style="flex-wrap: wrap;">
									<view class="name row bold">{{item.nickname}}
										<text v-if="item.level_name"
											style="font-size: 10px; margin-left: 10rpx;border: 1px solid #ffbc00;color: #ffbc00;padding: 0 10px;">{{item.level_name}}</text>

									</view>
									<view class="phone-row">
										<image src="/static/images/icon_7.png" mode="widthFix" class="icon1"></image>
										<text class="text">{{item.user_mobile}}</text>
										<image @tap="callPhone(item.user_mobile)" src="/static/images/icon_6.png"
											mode="widthFix" class="icon2"></image>
									</view>
								</view>

							</view>
							<view class="address ml20" >{{item.name}}</view>

							<view class="goods-info-box ml20">
								<view class="content-box">
									<view class="row-between" >
										<view class="left row">
											<view class="label">产品：</view>
											<view class="text">{{item.goods_name}}</view>
										</view>
										<view class="right">租期：{{item.goods_info}}</view>
									</view>
									<view class="date">下单时间：{{item.create_time}}</view>
								</view>
							</view>
							</view>
							<view class="address-box" v-if="item.delivery_type!=2">
								<view class="row">
									<view class="dot"></view>
									<view class="label">配送地址：</view>
									<view class="text">{{item.consignee}} {{item.mobile}}</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="mode=='commission_detail'">
					<view v-for="(item, index) in lists" :key="item.order_sn" class="order-item bg-white mt20">
						<view class="order-header row-between">
							<view class="muted xs row-center" style="gap: 10rpx;">
								<view>订单编号:{{item.order_sn}}</view>
								<image @tap="toCopy(item.order_sn)" src="../../static/images/copy_icon.png"
									style="width: 30rpx;" mode="widthFix">
								</image>
							</view>
							<view class="row" style="gap:10rpx">
								<view>{{getOrderType(item.type_status)}}</view>
								<view>|</view>
								<view :style="{'color':tagStyle(item)}">{{item.status_name}}</view>
							</view>
						</view>
						<view class="order-content row">
							<view class="order-goods-img">
								<u-image width="100%" height="100%" :src="item.avatar" />
							</view>
							<view class="order-goods-info ml20">
								<view class="row-between">
									<view class="name row bold">
										{{item.nickname}}
										<text v-if="item.level_name"
											style="font-size: 10px; margin-left: 10rpx;border: 1px solid #ffbc00;color: #ffbc00;padding: 0 10px;">{{item.level_name}}</text>

									</view>
									<view class="sm lighter" style="">
										佣金:<text style="color: #FF2C3C;">￥<text
												class="xxl">{{item.yj_money}}</text></text>
									</view>
								</view>
								<view class="row-between">
									<view class="phone-row">
										<image src="/static/images/icon_7.png" mode="widthFix" class="icon1"></image>
										<text class="text">{{item.phone}}</text>
										<image @tap="callPhone(item.phone)" src="/static/images/icon_6.png"
											mode="widthFix" class="icon2"></image>
									</view>
									<view style="display: flex;flex-direction: column;" class="">
										<text style="text-align: center;">{{item.name}}</text>
										<text style="text-align: center;">{{item.tname}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-info-box">
							<view class="content-box">
								<view class="row-between">
									<view class="left row">
										<view class="label">产品：</view>
										<view class="text">{{item.goods_name}}</view>
									</view>
									<view class="right">租期：{{item.goods_info}}</view>
								</view>
								<view class="date">下单时间：{{item.create_time}}</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="mode=='revenue_list'">
					<view v-for="(item, index) in lists" :key="item.order_sn" class="order-item bg-white mt20">
						<view class="order-content row">
							<view class="order-goods-img">
								<u-image width="100%" height="100%" :src="item.avatar" />
							</view>
							<view class="order-goods-info ml20">
								<view class="row-between">
									<view class="name row bold">{{item.name}}</view>
									<view class="phone-row" style="margin-top: 0;">
										<image src="/static/images/icon_7.png" mode="widthFix" class="icon1"></image>
										<text class="text">{{item.phone}}</text>
										<image @tap="callPhone(item.phone)" src="/static/images/icon_6.png"
											mode="widthFix" class="icon2"></image>
									</view>
								</view>
								<view class="row-between mt20">
									<view class="sm lighter" style="">
										营业额:<text style="color: #FF2C3C;">￥<text class="md">{{item.money}}</text></text>
									</view>
									<view class="sm lighter">
										{{item.create_time}}
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="goods-info-box">

                            <view class="content-box">
                                <view class="row-between">日期：{{item.create_time}}</view>
                            </view>
                        </view> -->
					</view>
				</template>
				<template v-else-if="mode=='goods_return'">
					<view v-for="(item, index) in lists" :key="item.order_sn" class="order-item bg-white mt20">
						<view class="order-header row-between">
							<view class="muted xs row-center" style="gap: 10rpx;">
								<view>订单编号:{{item.order_sn}}</view>
								<image @tap="toCopy(item.order_sn)" src="../../static/images/copy_icon.png"
									style="width: 30rpx;" mode="widthFix">
								</image>
							</view>
							<view class="row" style="gap:10rpx">
								<view :style="{'color':returnTagStyle(item.order_status)}">{{item.status_name}}</view>
							</view>
						</view>
						<view class="order-content row">
							<view class="order-goods-img">
								<u-image width="100%" height="100%" :src="item.avatar" />
							</view>
							<view class="order-goods-info ml20">
								<view class="row-between">
									<view class="name row bold">{{item.name}}</view>
								</view>
								<view class="phone-row">
									<image src="/static/images/icon_7.png" mode="widthFix" class="icon1"></image>
									<text class="text">{{item.mobile}}</text>
									<image @tap="callPhone(item.mobile)" src="/static/images/icon_6.png" mode="widthFix"
										class="icon2"></image>
								</view>
							</view>
						</view>
						<view class="goods-info-box">
							<view class="content-box row-between" style="align-items: start;">
								<view>
									<view class="row-between">
										<view class="left row">
											<view class="label">产品：</view>
											<view class="text">{{item.goods_name}}</view>
										</view>
									</view>
									<view class="date">下单时间：{{item.create_time}}</view>
									<view class="date">归还时间：{{item.end_time}}</view>
								</view>
								<view style="text-align: right;">
									<template v-if="item.order_status==3 && item.goods_return.status==1">
										<view>租期剩余</view>
										<view class="text xs mt20">
											<u-count-down :timestamp="item.goods_return.now_time" :show-days="false"
												color="#FF2C3C" separator-color="#FF2C3C" separator="zh"
												bg-color="transparent" font-size="24"></u-count-down>
										</view>
									</template>
									<template v-else>
										<view>租期共：{{item.goods_info}}</view>
									</template>
								</view>
							</view>
						</view>
						<view class="row-end mt20" style="padding: 0 20rpx;"
							v-if="(item.order_status==6 && item.status==0) || (item.order_status==3&&item.countdown.status==2)">
							<u-button size="mini" shape="circle" type="error"
								@click="gotoConfirm(item.id)">点击查看</u-button>
						</view>
					</view>
				</template>
				<loading-footer slotEmpty :status="loadingStatus">
					<view slot="empty" class="data-null column-center">
						<image class="img-null" src="/static/images/news_null.png"></image>
						<text class="sm muted">暂无订单～</text>
					</view>
				</loading-footer>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		agentOrderIds,
		loadingType
	} from "@/utils/type";
	import {
		getPromoteOrder,
		getGoodsReturnList,
		getCommissionDetailList,
		getRevenueList
	} from "@/api/user";
	import {
		loadingFun,
		copy
	} from '@/utils/tools'

	export default {
		data() {
			return {
				lists: null,
				page: 1,
				loadingStatus: loadingType.LOADING,
				confirmDialog: false
			};
		},

		components: {},
		props: {
			type: {
				type: Number | String,
				default: agentOrderIds.ALL
			},
			agent: {
				type: Object,
				default: null
			},
			// order_list 正常订单 goods_return 归还订单
			mode: {
				type: String,
				default: 'order_list'
			}
		},

		created() {
			uni.$on('REACH_BOTTOM', this.getGoodsList);
			uni.$on('reload-list', () => {
				this.reflesh()
				this.getGoodsList()
			})
			this.getGoodsList()
		},

		watch: {
			type: {
				handler(val) {
					if (val !== null && val !== undefined) {
						this.reflesh();
						this.getGoodsList();
					}
				}
			},
			agent: {
				handler(val) {
					this.reflesh();
					this.getGoodsList();
				}
			}
		},
		methods: {
			gotoConfirm(id) {
				uni.navigateTo({
					url: '/package_store/pages/confirm_return/confirm_return?id=' + id
				})
			},
			getOrderType(val) {
				switch (val) {
					case 1:
						return '租赁订单';
					case 2:
						return '租售订单';
					case 3:
						return '预约订单';
					default:
						return '';
				}
			},
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number
				})
			},
			toCopy(text) {
				copy(text)
			},
			returnTagStyle(val) {
				//归还状态:3待归还，4已完成，6待确认，空为全部
				let color = '#000';
				switch (val) {
					case 4:
						color = '#666';
						break;
					case 6:
					case 3:
						color = '#FF2C3C';
						break;
				}
				return color
			},
			tagStyle(item) {
				let color = '#000';
				//订单状态:0-待付款;1-待发货/取货/配送;2-待收货;3-租用中;4-已完成;5-已关闭,6归还待确认
				switch (item.order_status) {
					case 0:
					case 1:
					case 2:
					case 3:
					case 6:
						color = '#3187FD';
						break;
					case 4:
						color = '#666';
						break;
					case 5:
						color = '#FF2C3C';
						break;
				}
				return color
			},
			reflesh() {
				this.page = 1;
				this.lists = [];
				this.loadingStatus = loadingType.LOADING; // this.$getAfterSaleList();
			},

			getGoodsList() {
				let {
					loadingStatus,
					lists,
					page
				} = this;
				if (this.mode == 'order_list') {
					loadingFun(getPromoteOrder, page, lists, loadingStatus, {
						status: this.type,
						agent_id: this.agent ? this.agent.id : 0
					}).then(res => {
						this.setResult(res);
					})
				} else if (this.mode == 'goods_return') {
					loadingFun(getGoodsReturnList, page, lists, loadingStatus, {
						status: this.type,
					}).then(res => {
						this.setResult(res);
					})
				} else if (this.mode == 'commission_detail') {
					loadingFun(getCommissionDetailList, page, lists, loadingStatus, {
						type: this.type,
						agent_id: this.agent ? this.agent.id : 0
					}).then(res => {
						this.setResult(res);
					})
				} else if (this.mode == 'revenue_list') {
					loadingFun(getRevenueList, page, lists, loadingStatus, {
						type: this.type,
						agent_id: this.agent ? this.agent.id : 0
					}).then(res => {
						this.setResult(res);
					})
				}
			},
			setResult(res) {
				if (res) {
					this.page = res.page;
					this.lists = res.dataList
					this.loadingStatus = res.status
				}
			},

		}
	};
</script>
<style lang="scss">
	@import "index.scss";
</style>